<template lang="pug">
  d2-container(:filename="filename")
    el-card(shadow="never")
      div(slot="header",class="clearfix")
          span 用户列表
          span(v-if="querying")
            i(class="el-icon-loading")
          router-link(to="create")
            el-button(type="text",style="float: right; padding: 3px 0px;")
              i(class="el-icon-plus") 新建用户

      el-table(:data="paged.items",:show-overflow-tooltip="true",@selection-change="selectionChange")
        el-table-column(type="selection",width="50")
        el-table-column(label="用户名",width="300",prop="username")
        el-table-column(label="角色")
          template(slot-scope="scope")
            span(v-for="role in scope.row.roles",key="role.id") {{role.name}}
        el-table-column(label="#")
          template(slot-scope="scope")
            el-button(type="text" @click="prevBindWx(scope.row)") 绑定微信

      awesome-pagination(:total="paged.totalCount",:page="page",@change="getUsers")

      el-dialog(:visible.sync="bindWxQrcodeVisible" 
                style="text-align:center;"
                title="绑定微信账号")
        img(:src="getServerUrl('admin/qrcode/accountBindWeixinQrCOde')+`?callback=${callback}&authRedirect=${authRedirect}`" 
            v-if="bindingWxAccount"
            class="bindWxQrcode")
        p(v-if="bindingWxAccount")
          span 微信扫描二维码，绑定账号
          strong {{bindingWxAccount.username}}
  </d2-container>
</template>

<script>
import Vue from "vue";
import { AwesomePagination } from "awesome-element-ui";
Vue.use(AwesomePagination);

import axios from "@/plugin/axios";
import PageList from "@/mixins/PageList";

export default {
  name: "user-index",
  mixins: [PageList],
  data() {
    return {
      filename: __filename,
      /**请求接口返回 */
      paged: {},
      bindWxQrcodeVisible: false,
      bindingWxAccount: null // 需要绑定的账号
    };
  },
  // components: { "awesome-pagination": Pagination },
  computed: {
    // 回调地址
    callback() {
      let res = `${location.origin}${location.pathname}#/account/bind?accountId=${this.bindingWxAccount.id}`;
      res = encodeURIComponent(res);
      return res;
    },
    // 授权地址
    authRedirect() {
      let res = location.origin + this.getServerUrl("/weixinAuth?callback_url=");
      return res;
    }
  },
  methods: {
    getUsers() {
      this.querying = true;
      axios({
        method: "post",
        url: "superAdmin/getUsers",
        data: { page: this.page, filter: this.filter }
      })
        .then(paged => this.getUsersSuccess(paged))
        .catch(() => (this.querying = false));
    },
    getUsersSuccess(paged) {
      this.paged = paged;
      this.querying = false;
    },
    prevBindWx(account) {
      console.log(account);
      this.bindWxQrcodeVisible = true;
      this.bindingWxAccount = account;
    }
  },
  created() {
    this.getUsers();
  }
};
</script>
<style scoped>
.bindWxQrcode {
  max-width: 350px;
  text-align: center;
  margin: 0 auto;
}
</style>
